body {
  overflow: hidden;
  background: #fafafa;
}
a,
a img {
  border: 0px;
  outline: none;
  color: #000;
  text-decoration: none;
}
/*--------------------------------------*/
#add_links{
	font-size:12px;
	font-family:微软雅黑;
	position:absolute;
	text-align:right;
	bottom:50px;
	left:22px;
	display:none;
}
#add_links > span{
	opacity:.5;
	margin:0 5px 0 8px;
}
#add_scrolling {
  width: 128px;
  height: 54px;
  position: absolute;
  left: 50%;
  bottom: 10px;
  margin-left: -64px;
  background-image: url('./images/scrolling.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #add_scrolling {
    background-image: url("./images/scrolling@2x.png");
    background-size: 128px 54px;
    background-repeat: no-repeat;
  }
}
#add_nav {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -80px;
}
#add_nav div {
  width: 8px;
  height: 8px;
  background-image: url('./images/dot.png');
  background-repeat: no-repeat;
  margin-bottom: 30px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #add_nav div {
    background-image: url("./images/dot@2x.png");
    background-size: 8px 8px;
    background-repeat: no-repeat;
  }
}
.on {
  background-image: url('./images/dot_on.png') !important;
  background-repeat: no-repeat !important;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  .on {
    background-image: url("./images/dot_on@2x.png");
    background-size: 8px 8px;
    background-repeat: no-repeat;
  }
}
/*--------------------------------------*/
@-webkit-keyframes orbloop {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes orbloop {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes orbmove {
  from {
    -webkit-transform: translateX(0px);
  }
  to {
    -webkit-transform: translateX(-2000px);
  }
}
@keyframes orbmove {
  from {
    transform: translateX(0px);
  }
  to {
    transform: translateX(-2000px);
  }
}
#bg {
  position: absolute;
  width: 1000px;
  height: 1000px;
  top: 50%;
  left: 50%;
  margin-left: -500px;
  margin-top: -500px;
}
#bg div div {
  position: absolute;
}
#bg {
  opacity: 0;
}
#bg .row1 div {
  -webkit-animation: orbmove 96s linear infinite;
  animation: orbmove 96s linear infinite;
  opacity:0.3;
}
#bg .row1 .orb1 {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  margin-left: -30px;
  margin-top: -380px;
}
#bg .row1 .orb1 div {
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background: -webkit-linear-gradient(top, #ffffff, #f26a78);
  background: linear-gradient(to bottom, #ffffff, #f26a78);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row1 .orb2 {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-left: 450px;
  margin-top: 350px;
  
}
#bg .row1 .orb2 div {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: -webkit-linear-gradient(top, #ffffff, #f26a78);
  background: linear-gradient(to bottom, #ffffff, #f26a78);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row1 .orb1c {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 50%;
  left: 50%;
  margin-left: 1970px;
  margin-top: -380px;
}
#bg .row1 .orb1c div {
  width: 100%;
  height: 100%;
  border-radius: 60px;
  background: -webkit-linear-gradient(top, #ffffff, #f26a78);
  background: linear-gradient(to bottom, #ffffff, #f26a78);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row1 .orb2c {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-left: 2450px;
  margin-top: 50px;
}
#bg .row1 .orb2c div {
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: -webkit-linear-gradient(top, #ffffff, #f26a78);
  background: linear-gradient(to bottom, #ffffff, #f26a78);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row2 div {
  -webkit-animation: orbmove 48s linear infinite;
  animation: orbmove 48s linear infinite;
  opacity:0.6;
}
#bg .row2 .orb1 {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: -500px;
  margin-top: -300px;
}
#bg .row2 .orb1 div {
  width: 100%;
  height: 100%;
  border-radius: 200px;
  background: -webkit-linear-gradient(top, #ffffff, #f26a78);
  background: linear-gradient(to bottom, #ffffff, #f26a78);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row2 .orb2 {
  position: absolute;
  width: 250px;
  height: 250px;
  top: 50%;
  left: 50%;
  margin-left: 175px;
  margin-top: -125px;
}
#bg .row2 .orb2 div {
  width: 100%;
  height: 100%;
  border-radius: 250px;
  background: -webkit-linear-gradient(top, #ffffff, #f26a78);
  background: linear-gradient(to bottom, #ffffff, #f26a78);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row2 .orb1c {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: 1500px;
  margin-top: -300px;
}
#bg .row2 .orb1c div {
  width: 100%;
  height: 100%;
  border-radius: 200px;
  background: -webkit-linear-gradient(top, #ffffff, #f26a78);
  background: linear-gradient(to bottom, #ffffff, #f26a78);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row2 .orb2c {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 50%;
  left: 50%;
  margin-left: 2100px;
  margin-top: -200px;
}
#bg .row2 .orb2c div {
  width: 100%;
  height: 100%;
  border-radius: 400px;
  background: -webkit-linear-gradient(top, #ffffff, #f26a78);
  background: linear-gradient(to bottom, #ffffff, #f26a78);/*dedede*/
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row3 div {
  -webkit-animation: orbmove 24s linear infinite;
  animation: orbmove 24s linear infinite;
  opacity:0.7;
}
#bg .row3 .orb1 {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-left: 850px;
  margin-top: -300px;
}
#bg .row3 .orb1 div {
  width: 100%;
  height: 100%;
  border-radius: 300px;
  background: -webkit-linear-gradient(top, #f26a78, #ffffff);
  background: linear-gradient(to bottom, #f26a78, #ffffff);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row3 .orb2 {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  margin-left: 0px;
  margin-top: 0px;
}
#bg .row3 .orb2 div {
  width: 100%;
  height: 100%;
  border-radius: 600px;
  background: -webkit-linear-gradient(top, #f26a78, #ffffff);
  background: linear-gradient(to bottom, #f26a78, #ffffff);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row3 .orb1c {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  margin-left: 2850px;
  margin-top: -300px;
}
#bg .row3 .orb1c div {
  width: 100%;
  height: 100%;
  border-radius: 300px;
  background: -webkit-linear-gradient(top, #f26a78, #ffffff);
  background: linear-gradient(to bottom, #f26a78, #ffffff);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
#bg .row3 .orb2c {
  position: absolute;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  margin-left: 2000px;
  margin-top: 0px;
}
#bg .row3 .orb2c div {
  width: 100%;
  height: 100%;
  border-radius: 600px;
  background: -webkit-linear-gradient(top, #f26a78, #ffffff);
  background: linear-gradient(to bottom, #f26a78, #ffffff);
  -webkit-animation: orbloop 6s linear infinite;
  animation: orbloop 6s linear infinite;
}
/*--------------------------------------*/
#p0,
#p1,
#p2,
#p3,
#p3_point {
  position: absolute;
  width: 1024px;
  height: 768px;
  top: 50%;
  left: 50%;
  margin-left: -512px;
  margin-top: -384px;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}
#p0_t_2 {
  perspective: 1000px;
}
#p0_8_1,
#p0_8_2 {
  /*border: 3px solid black;*/

}

#p0_t_2 {
position: absolute;
width: 840px;
height: 360px;
top: 50%;
left: 50%;
margin-left: -426px;
margin-top: -170px;
}
#slogan_1 {
  width: 840px;
  height: 360px;
  position: absolute;
  background-image: url('./images/slider1.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #slogan_1 {
    background-image: url("./images/slider1@2x.png");
    background-size: 840px 360px;
    background-repeat: no-repeat;
  }
}
#slogan_2 {
  width: 840px;
  height: 360px;
  position: absolute;
  background-image: url('./images/slider2.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #slogan_2 {
    background-image: url("./images/slider2@2x.png");
    background-size: 840px 360px;
    background-repeat: no-repeat;
  }
}
#slogan_3 {
  width: 840px;
  height: 360px;
  position: absolute;
  background-image: url('./images/slider3.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #slogan_3 {
    background-image: url("./images/slider3@2x.png");
    background-size: 840px 360px;
    background-repeat: no-repeat;
  }
}
#p0_btn {
  position: absolute;
  width: 203px;
  height: 64px;
  top: 50%;
  left: 50%;
  margin-left: 198.5px;
  margin-top: -292px;
  opacity: 0;
}
#p0_btn > span {
  display: inline-block;
  font-size: 12px;
  font-family: '微软雅黑', 'Helvetica';
  color: #888;
  width: 203px;
  text-align: center;
  margin-top: 10px;
  margin-right: 10px;
}
#p0_btn > span > span {
  margin-left: 10px;
}
/*p1------------------------*/
#p1_t_1 {
  position: absolute;
  width: 200px;
  height: 278.25px;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -303px;
  background-image: url('./images/p1t1.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p1_t_1 {
    background-image: url("./images/p1t1@2x.png");
    background-size: 200px 278.25px;
    background-repeat: no-repeat;
  }
}
#p1_t_2 {
  position: absolute;
  width: 514px;
  height: 272px;
  top: 50%;
  left: 50%;
  margin-left: -257px;
  margin-top: 14px;
  background-image: url('./images/p1t2.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p1_t_2 {
    background-image: url("./images/p1t2@2x.png");
    background-size: 514px 272px;
    background-repeat: no-repeat;
  }
}
#p1_ui_0 {
  position: absolute;
  width: 923px;
  height: 80px;
  top: 50%;
  left: 50%;
  margin-left: -461.5px;
  margin-top: -140px;
  background-image: url('./images/p1ui0.png');
  background-repeat: no-repeat;
  -webkit-transform-origin: center bottom;
  -moz-transform-origin: center bottom;
  transform-origin: center bottom;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p1_ui_0 {
    background-image: url("./images/p1ui0@2x.png");
    background-size: 923px 80px;
    background-repeat: no-repeat;
  }
}
/*#p1_ui_1{
    .center(512px,229px,-190px,-120px);
    .at2x('./images/p1ui1.png');
}
#p1_ui_2{
    .center(512px,229px,-190px,-120px);
    .at2x('./images/p1ui0.png');
}*/
/*p2------------------------*/
#p2_t_1 {
  position: absolute;
  width: 157px;
  height: 306px;
  top: 50%;
  left: 50%;
  margin-left: -78.5px;
  margin-top: -303px;
  background-image: url('./images/p2t1.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p2_t_1 {
    background-image: url("./images/p2t1@2x.png");
    background-size: 157px 306px;
    background-repeat: no-repeat;
  }
}
#p2_t_2 {
  position: absolute;
  width: 514px;
  height: 136px;
  top: 50%;
  left: 50%;
  margin-left: -257px;
  margin-top: 52px;
  background-image: url('./images/p2t2.png');
  background-repeat: no-repeat;
  opacity: 0;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p2_t_2 {
    background-image: url("./images/p2t2@2x.png");
    background-size: 514px 136px;
    background-repeat: no-repeat;
  }
}
#p2_pop {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  /*transform: rotate(30deg) translateX(-100px);*/

  /*-webkit-transform: rotate(30deg) translateX(-100px);*/

}
#p2_pop_1 {
  position: absolute;
  width: 172px;
  height: 172px;
  top: 50%;
  left: 50%;
  margin-left: -386px;
  margin-top: -286px;
  background-image: url('./images/p2pop1.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p2_pop_1 {
    background-image: url("./images/p2pop1@2x.png");
    background-size: 172px 172px;
    background-repeat: no-repeat;
  }
}
#p2_pop_2 {
  position: absolute;
  width: 73px;
  height: 73px;
  top: 50%;
  left: 50%;
  margin-left: -376.5px;
  margin-top: -56.5px;
  background-image: url('./images/p2pop2.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p2_pop_2 {
    background-image: url("./images/p2pop2@2x.png");
    background-size: 73px 73px;
    background-repeat: no-repeat;
  }
}
#p2_pop_3 {
  position: absolute;
  width: 337px;
  height: 337px;
  top: 50%;
  left: 50%;
  margin-left: -348.5px;
  margin-top: -288.5px;
  background-image: url('./images/p2pop3.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p2_pop_3 {
    background-image: url("./images/p2pop3@2x.png");
    background-size: 337px 337px;
    background-repeat: no-repeat;
  }
}
#p2_pop_4 {
  position: absolute;
  width: 269px;
  height: 269px;
  top: 50%;
  left: 50%;
  margin-left: 125.5px;
  margin-top: -254.5px;
  background-image: url('./images/p2pop4.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p2_pop_4 {
    background-image: url("./images/p2pop4@2x.png");
    background-size: 269px 269px;
    background-repeat: no-repeat;
  }
}
#p3_t_1 {
  position: absolute;
  width: 157px;
  height: 306px;
  top: 50%;
  left: 50%;
  margin-left: -78.5px;
  margin-top: -253px;
  background-image: url('./images/p3t1.png');
  background-repeat: no-repeat;
  opacity: 0;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p3_t_1 {
    background-image: url("./images/p3t1@2x.png");
    background-size: 157px 306px;
    background-repeat: no-repeat;
  }
}
#p3_t_2 {
  position: absolute;
  width: 514px;
  height: 136px;
  top: 50%;
  left: 50%;
  margin-left: -257px;
  margin-top: 62px;
  background-image: url('./images/p3t2.png');
  background-repeat: no-repeat;
  opacity: 0;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p3_t_2 {
    background-image: url("./images/p3t2@2x.png");
    background-size: 514px 136px;
    background-repeat: no-repeat;
  }
}
#p3_defence {
  position: absolute;
  width: 334px;
  height: 334px;
  top: 50%;
  left: 50%;
  margin-left: -477px;
  margin-top: -267px;
  background-image: url('./images/p3main.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p3_defence {
    background-image: url("./images/p3main@2x.png");
    background-size: 334px 334px;
    background-repeat: no-repeat;
  }
}
#p3_list {
  position: absolute;
  width: 161px;
  height: 275px;
  top: 50%;
  left: 50%;
  margin-left: 169.5px;
  margin-top: -237.5px;
  background-image: url('./images/p3list.png');
  background-repeat: no-repeat;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p3_list {
    background-image: url("./images/p3list@2x.png");
    background-size: 161px 275px;
    background-repeat: no-repeat;
  }
}
#p3_point {
  position: absolute;
  width: 161px;
  height: 275px;
  top: 50%;
  left: 50%;
  margin-left: 149.5px;
  margin-top: -223.5px;
}
#p3_point div {
  display: block;
  width: 22px;
  height: 22px;
  background-image: url('./images/p3point.png');
  background-repeat: no-repeat;
  margin-bottom: 33px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #p3_point div {
    background-image: url("./images/p3point@2x.png");
    background-size: 22px 22px;
    background-repeat: no-repeat;
  }
}
#gotomac {
  position: absolute;
  width: 701px;
  height: 86px;
  top: 50%;
  left: 50%;
  margin-left: -330.5px;
  margin-top: 67px;
  background-image: url('./images/gotomac.png');
  background-repeat: no-repeat;
  display: none;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #gotomac {
    background-image: url("./images/gotomac@2x.png");
    background-size: 701px 86px;
    background-repeat: no-repeat;
  }
}
#gotomac:hover {
  opacity:0.85;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
  #gotomac:hover {
    background-image: url("./images/gotomachover@2x.png");
    background-size: 701px 86px;
    background-repeat: no-repeat;
  }
}
